<template>
  <el-dialog
    title="导入设备"
    :visible.sync="dialogVisible"
    width="800px"
    class="devicer-upload-container"
  >
    <div
      class="upload"
      v-if="!exampleShow"
    >
      <el-upload
        drag
        action
        :auto-upload="false"
        :show-file-list="true"
        :before-upload="beforeExcelUpload"
        :http-request="handleExcelUpload"
        :file-list="fileList"
        :on-exceed="handleExcelExceed"
        :limit="1"
        ref="upload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
      <div>Excel表头需包含工厂名称，设备类型，设备名称，序列号，纬度，经度，设备位置 <el-button
          type="text"
          @click="showExample"
        >查看示例</el-button>
      </div>
    </div>
    <div
      class="example"
      v-else
    >
      <el-table :data="tableData">
        <el-table-column
          label="工厂名称"
          prop="factoryName"
        ></el-table-column>
        <el-table-column
          label="设备类型"
          prop="deviceType"
        ></el-table-column>
        <el-table-column
          label="设备名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="序列号"
          prop="serialNumber"
        ></el-table-column>
        <el-table-column
          label="纬度"
          prop="latitude"
        ></el-table-column>
        <el-table-column
          label="经度"
          prop="longitude"
        ></el-table-column>
        <el-table-column
          label="设备位置"
          prop="location"
        ></el-table-column>
      </el-table>
      <el-button
        type="text"
        @click="hideExample"
      >上传文件</el-button>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="downLoadTemplate">下载模板</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="confirm"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { validateForm } from './service';
import { Message } from 'element-ui';
import { parseError } from '../../../utils/index';
import { uploadDeviceApi } from '../../../api/upload';

export default {
  data() {
    return {
      dialogVisible: false,
      btnLoading: false,
      fileList: [],
      tableData: [
        {
          name: 'leak-1000-1',
          deviceType: 'leak-1000',
          factoryName: '测试工厂',
          serialNumber: 'sn0001',
          longitude: 40.157873,
          latitude: 116.558776,
          location: '北京市顺义区高丽营镇火寺路88号'
        },
        {
          name: 'leak-1000-2',
          deviceType: 'leak-1000',
          factoryName: '测试工厂',
          serialNumber: 'sn0002',
          longitude: 40.149087,
          latitude: 116.594914,
          location: '北京市顺义区南法信镇中纬路3号'
        }
      ],
      exampleShow: false
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) {
          this.fileList = [];
          this.exampleShow = false;
        }
      }
    }
  },
  methods: {
    downLoadTemplate() {
      window.open('https://siot.oss-cn-shanghai.aliyuncs.com/samples/devices.xlsx');
    },
    showDialog() {
      this.dialogVisible = true;
    },
    confirm() {
      this.$refs.upload.submit();
    },
    beforeExcelUpload(file) {
      const fileNames = file.name.split('.');
      if (!fileNames || fileNames.length <= 1 || (fileNames[fileNames.length - 1] !== 'xls' && fileNames[fileNames.length - 1] !== 'xlsx')) {
        Message.error('文件格式不正确');
        return false;
      }
    },
    handleExcelExceed(files, fileList) {
      Message.error('同时仅支持上传一个文件');
    },
    handleExcelUpload(option) {
      this.btnLoading = true;
      let formData = new FormData();
      formData.append('file', option.file, option.file.name);
      uploadDeviceApi(formData)
        .then(res => {
          Message.success(res.count);
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    showExample() {
      this.exampleShow = true;
    },
    hideExample() {
      this.exampleShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.devicer-upload-container {
  .upload {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .example {
    text-align: right;
  }
}
.input {
  width: 300px;
}
</style>
